<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Filter Mode Examples</title>
    <style>
        form {
            margin: 0;
        }
        
        textarea {
            display: block;
        }
        
        .left {
            height: 700px;
            width: 20%;
            float: left;
            padding: 40px;
        }
        
        .right {
            float: right;
            /* border: 1px solid black; */
            height: 800px;
            width: 78.5%;
        }
        
        .huoqu {
            height: 160px;
            width: 1180px;
            margin: 50px 0px 0px 0px;
        }
        
        .a {
            float: left;
            height: 100%;
            width: 45%;
            /* border: 1px solid black; */
        }
        
        .b {
            float: left;
            height: 100%;
            width: 45%;
            /* border: 1px solid black; */
        }
        
        .right1 {
            padding: 20px;
        }
    </style>

    <link rel="stylesheet" href="../css/default.css" />
    <script charset="utf-8" src="../js/kindeditor-min.js"></script>
    <script charset="utf-8" src="../js/zh_CN.js"></script>


    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        KindEditor.ready(function(K) {
            K.create('textarea[name="content"]', {
                filterMode: false
            });
        });
    </script>
</head>

<body>
    <div class="left">
        <table class="table">
            <caption>目录</caption>
            <thead>
                <tr>
                    <th>第一章</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th>第二章</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th>第三章</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th>第四章</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tanmay</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                </tr>
            </tbody>

        </table>

    </div>
    <div class="right">
        <!-- 右上部 -->
        <div class="huoqu">
            <!-- 右上部左边 -->
            <div class="a">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">券序号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入券序号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">章节序号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="lastname" placeholder="请输入章节序号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">

                        </div>
                    </div>
                    <label for="lastname" class="col-sm-2 control-label">内容：</label>

                </form>

            </div>
            <!-- 右上部右边 -->
            <div class="b">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">券名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入券名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">章节名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="lastname" placeholder="请输入章节名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">

                        </div>
                    </div>

                </form>
            </div>

        </div>
        <form class=".right1">
            <textarea name="content" style="width:1100px;height:200px;"></textarea>

        </form>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </div>

</body>

</html>